<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>不凡学员培训效果反馈表</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input[type="text"] {
            width: calc(100% - 4em);
            border: none;
            outline: none;
            border-bottom: 1px solid gray;
        }

        .content {
            width: 1000px;
            margin: 0 auto;
            /* background-color: #eee; */
        }

        .title {
            width: 100%;
            text-align: center;
            padding: 40px 10px;
            box-sizing: border-box;
        }

        .bold {
            font-size: 24px;
            font-weight: bolder;
        }

        .light {
            font-size: 14px;
            color: gray;
            margin-top: 20px;
        }

        .text {
            text-align: left;
            font-size: 16px;
            text-indent: 2em;
            margin-top: 10px;
            line-height: 24px;
        }

        .type {
            display: flex;
            padding: 0 10px;
            box-sizing: border-box;
            justify-content: space-between;
        }

        .course label {
            margin-left: 40px;
        }

        .date input {
            margin-left: 40px;
        }

        .tr {
            display: flex;
            /* margin-top: 20px; */
            border: 1px solid #333;
            border-bottom: none;
            height: 50px;
            line-height: 50px;
        }

        .tr.total {
            margin-top: 40px;
        }

        .tr.bf {
            min-height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #333;
        }

        .tr.teacher {
            height: 340px;
        }

        .t-item .star {
            display: flex;
            font-weight: bolder;
        }

        .tr .tip {
            width: 300px;
            border-right: 1px solid #333;
            box-sizing: border-box;
            text-indent: 10px;
        }

        .tr textarea {
            width: calc(100% - 300px);
            border: none;
            outline: none;
            font-size: 16px;
            padding: 6px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .t-list {
            display: none;
            padding: 6px 10px;
            box-sizing: border-box;
            line-height: 40px;
            flex: 1;
        }

        .t-list.show {
            display: block;
        }

        .hide {
            display: none;
        }

        .advice {
            color: gray;
            font-size: 14px;
        }

        .advice textarea {
            width: calc(100% - 4em);
            height: 40px;
            font-size: 14px;
            border-bottom: 1px solid gray;
        }

        .btn {
            width: 140px;
            height: 32px;
            margin: 30px auto;
            background-color: #13ce66;
            text-align: center;
            line-height: 32px;
            border-radius: 10px;
            cursor: pointer;
            color: #ffffff;
        }

        .red {
            color: red !important;
            font-size: 16px;
        }
    </style>
    <style>
        .rate-content {
            margin-left: 10px;
        }

        /* 去掉默认样式 */
        .rate-content input {
            -webkit-appearance: none;
            border: none;
            outline: none;
            cursor: pointer;
            margin-right: 10px;
        }

        /* $main: #ffa822;  */
        /* 单个星星 */
        .rate-content input {
            /* font-family: "iconfont";  */
            font-size: 30px;
            padding-right: 10px;

        }

        /* 默认显示的星星 */
        .rate-content input::after {
            content: "☆ ";
            color: #999;
            transition: color .4s ease;
        }

        /* 选中时 */
        .rate-content input[name="total"]:checked::after {
            content: '★ ';
            color: #ffa822;
        }

        .rate-content input[name="total"]:checked~input[name="total"]::after {
            content: '★ ';
            color: #ffa822;
        }

        /* 反向排列 */
        .rate-content {
            display: flex;
            flex-flow: row-reverse;
        }
    </style>
    <style>
        @media (max-width: 768px) {
            .content {
                width: 96%;
            }

            .content .type {
                flex-direction: column;
            }

            .content .course label {
                margin-left: 12px;
            }

            .content .date {
                margin-top: 40px;
            }

            .content .date input {
                margin-left: 12px;
            }

            .content .tr {
                flex-direction: column;
                border: none;
                height: 150px;
                margin-top: 30px;
            }

            .content .tr.total {
                height: 100px;
            }

            .content .tr.bf {
                line-height: 50px;
            }

            .content .tr.teacher {
                height: 712px;
            }

            .content .tr .tip {
                width: 100%;
                border: none;
                font-weight: bolder;
            }

            .content .tr .t-item {
                margin-top: 30px;
            }

            .content .tr .t-item:nth-child(1) {
                margin-top: 0;
            }

            .content .tr .t-item textarea {
                width: calc(100% - 4em);
            }

            .content .tr textarea {
                width: 100%;
            }

            .total .rate-content {
                width: fit-content;
            }

            .content .tr textarea {
                border: 1px solid gray;
                height: 100px;
            }

            .content .rate-content input {
                margin-right: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="title">
            <div class="bold">
                学员培训效果反馈表
            </div>
            <div class="light">
                （本反馈表采用匿名形式回答）
            </div>
            <div class="text">
                非常感谢您参加不凡学院的培训课程，为了更好的提高培训质量，请将您学完后的感受和意见反馈给我们，以便我们进一步改进今后的培训工作，感恩遇见，您的意见很宝贵。
            </div>
        </div>

        <!-- 课程选择 -->
        <div class="type">
            <div class="course">
                <span class="red">*</span>培训课程：
                <label for="ui">
                    <input id="ui" value="1" name="classType" type="radio" checked> UI设计
                </label>
                <label for="web">
                    <input id="web" value="2" name="classType" type="radio"> 前端开发
                </label>
            </div>
            <div class="date">
                <span class="red">*</span>培训班级：
                <select class="classes student-class-ui">
                    <option value="0">请选择</option>
                    @foreach ($class_ui as $class)
                    <option value="{{ $class->id }}">{{ $class->class_name }}</option>
                    @endforeach
                </select>
                <select class="classes student-class-web hide">
                    <option value="0">请选择</option>
                    @foreach ($class_h5 as $class)
                    <option value="{{ $class->id }}">{{ $class->class_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <!-- 评价表格 -->
        <div class="tr total">
            <div class="tip">
                <span class="red">*</span>此次课程是否达到我的预期，请打分：
            </div>
            <div class="rate-content">
                <input type="radio" name="total" value="5">
                <input type="radio" name="total" value="4">
                <input type="radio" name="total" value="3">
                <input type="radio" name="total" value="2">
                <input type="radio" name="total" value="1">
            </div>
        </div>
        <!-- 课程建议 -->
        <div class="tr total-advice">
            <div class="tip">
                <span class="red">*</span>对课程有什么肯定和建议：
            </div>
            <textarea id="course_advice" cols="30" rows="10"></textarea>
        </div>
        <!-- 招生老师评价 -->
        <div class="tr zx-advice">
            <div class="tip">
                <span class="red">*</span>招生老师入学前咨询接待反馈：
            </div>
            <textarea id="zx_advice" cols="30" rows="10"></textarea>
        </div>
        <!-- 授课老师评分建议 -->
        <div class="tr teacher">
            <div class="tip">
                授课老师个人评分及建议反馈：
            </div>
            <!-- ui老师 -->
            <!-- todo 有bug，多余4个老师无法显示更多 -->
            <div class="t-list ui show">
                <!-- 老师ui数量 -->
                <input type="hidden" id="ui_count" value="{{ count($teacher_ui) }}">
                @foreach ($teacher_ui as $teacher)
                <div class="t-item li">
                    <div class="star">
                        <span class="red">*</span>{{ $teacher->name }}：
                        <div class="rate-content">
                            @for ($i = 5; $i > 0; $i--)
                            <input type="radio" name="ui_{{ $teacher->id }}" value="{{ $i }}">
                            @endfor
                        </div>
                    </div>

                    <div class="advice">
                        <span class="red">*</span>建议：
                        <textarea name="ui_{{ $teacher->id }}" cols="30" rows="10" data-teacher="{{ $teacher->name }}"></textarea>
                    </div>
                </div>
                @endforeach
            </div>
            <!-- 前端老师 -->
            <div class="t-list web">
                <!-- 老师web数量 -->
                <input type="hidden" id="web_count" value="{{ count($teacher_h5) }}">
                @foreach ($teacher_h5 as $teacher)
                <div class="t-item li">
                    <div class="star">
                        <span class="red">*</span>{{ $teacher->name }}：
                        <div class="rate-content">
                            @for ($i = 5; $i > 0; $i--)
                            <input type="radio" name="web_{{ $teacher->id }}" value="{{ $i }}">
                            @endfor
                        </div>
                    </div>

                    <div class="advice">
                        <span class="red">*</span>建议：
                        <textarea name="web_{{ $teacher->id }}" id="" cols="30" rows="10" data-teacher="{{ $teacher->name }}"></textarea>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <!-- 不凡寄语 -->
        <div class="tr bf">
            <div class="tip">
                <span class="red">*</span>对不凡学院整体评价与毕业寄语：
            </div>
            <textarea id="bf_hope" cols="30" rows="10"></textarea>
        </div>
        <div class="btn" onclick="submit2()">提交</div>
    </div>

    <script src="assert/jquery.3.4.1.js"></script>
    <script src="assert/alert.min.js"></script>
    <script src="assert/fingerprint2.js"></script>
    <script>
        function changeHeight(classType) {
            if ($(window).innerWidth() < 768) {
                var oneHeight = 178
                var uiCount = $('#ui_count').val()
                var webCount = $('#web_count').val()
                var height = classType == '1' ? oneHeight * uiCount : oneHeight * webCount
                $('.content .tr.teacher').css({
                    'height': height
                })
            }
        }
        // 获取指纹
        var fingerprint = undefined;
        if (window.requestIdleCallback) {
            requestIdleCallback(function() {
                Fingerprint2.get(function(components) {
                    // 参数
                    var values = components.map(function(component) {
                        return component.value
                    });
                    // 指纹
                    fingerprint = Fingerprint2.x64hash128(values.join(''), 31)
                    localStorage.setItem('fingerprint', fingerprint)
                })
            })
        } else {
            setTimeout(function() {
                Fingerprint2.get(function(components) {
                    // 参数
                    var values = components.map(function(component) {
                        return component.value
                    });
                    // 指纹
                    fingerprint = Fingerprint2.x64hash128(values.join(''), 31)
                    localStorage.setItem('fingerprint', fingerprint)
                })
            }, 500)
        }

        // $.confirm('弹出了一个confirm对话框',function(e){
        //     $.alert('你点击了'+(e?'确定':'取消'))
        // })
        // $.load('显示了一条load信息')

        // 添加csrftoken验证
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var student = {
            class_type: '1',
            course_star: undefined,
            course_advice: undefined,
            class_id: undefined
        };

        changeHeight(student.class_type);

        // 星星修改
        $("input[name*='ui_']").click(function() {
            var name = $(this).attr('name');
            $(this).append("<style>.rate-content input[name='" + name + "']:checked::after {content: '★ ';color: #ffa822;}.rate-content input[name='" + name + "']:checked~input[name='" + name + "']::after {content: '★ ';color: #ffa822;}</style>");
        })
        $("input[name*='web_']").click(function() {
            var name = $(this).attr('name');
            $(this).append("<style>.rate-content input[name='" + name + "']:checked::after {content: '★ ';color: #ffa822;}.rate-content input[name='" + name + "']:checked~input[name='" + name + "']::after {content: '★ ';color: #ffa822;}</style>");
        })

        // 选择课程
        $('input[name=classType]').change(function() {
            student.class_type = this.value
            changeHeight(student.class_type);
            if (this.value == '1') {
                // ui
                $('.t-list').removeClass('show');
                $('.t-list.ui').addClass('show');
                $('.student-class-ui').removeClass('hide');
                $('.student-class-web').addClass('hide');
                student.class_id = undefined
            } else {
                // 前端
                $('.t-list').removeClass('show');
                $('.t-list.web').addClass('show');
                $('.student-class-ui').addClass('hide');
                $('.student-class-web').removeClass('hide');
                student.class_id = undefined
            }
        })
        // 选择班级
        $('.date .classes').change(function() {
            student.class_id = this.value;
        })

        // 防抖立即执行
        function debounce(func, wait) {
            let timer;
            return function() {
                let context = this;
                let args = arguments;
                if (timer) clearTimeout(timer);
                let callNow = !timer;
                timer = setTimeout(function() {
                    timer = null;
                }, wait)
                if (callNow) func.apply(context, args);
            }
        }

        var submit2 = debounce(submit, 2000);

        function submit() {
            if (!student.class_id) {
                $.alert('请选择班级')
                return false
            }
            student.course_star = $("input[name*='total']:checked").val(); // 课程总评分
            if (!student.course_star) {
                $.alert('请填写课程总评分')
                return false
            }
            student.course_advice = $('#course_advice').val(); // 课程意见
            if (!student.course_advice) {
                $.alert('请填写课程意见')
                return false
            }
            student.zx_advice = $('#zx_advice').val(); // 咨询意见
            if (!student.zx_advice) {
                $.alert('请填写入学前的咨询接待反馈')
                return false
            }
            var teachers = {}
            if (student.class_type == '1') {
                $("input[name*='ui_']:checked").each(function() {
                    var id = $(this).attr('name').split('_')[1]
                    teachers[id] = {
                        teacher_id: id,
                        teacher_star: $(this).val()
                    }
                })
                if (Object.keys(teachers).length < Number($('#ui_count').val())) {
                    $.alert('请对每个老师打分和评价')
                    return false
                }
                $("textarea[name*='ui_']").each(function() {
                    var id = $(this).attr('name').split('_')[1]
                    teachers[id].teacher_name = $(this).attr('data-teacher')
                    teachers[id].teacher_advice = $(this).val()
                })
                var notContent = Object.values(teachers).find(function(item) {
                    return !item.teacher_advice
                })
                if (notContent) {
                    $.alert('请对每个老师打分和评价')
                    return false
                }
            } else {
                $("input[name*='web_']:checked").each(function() {
                    var id = $(this).attr('name').split('_')[1]
                    teachers[id] = {
                        teacher_id: id,
                        teacher_star: $(this).val()
                    }
                })
                if (Object.keys(teachers).length < Number($('#web_count').val())) {
                    $.alert('请对每个老师打分和评价')
                    return false
                }
                $("textarea[name*='web_']").each(function() {
                    var id = $(this).attr('name').split('_')[1]
                    teachers[id].teacher_name = $(this).attr('data-teacher')
                    teachers[id].teacher_advice = $(this).val()
                })
                var notContent = Object.values(teachers).find(function(item) {
                    return !item.teacher_advice
                })
                if (notContent) {
                    $.alert('请对每个老师打分和评价')
                    return false
                }
            }
            student.teachers = Object.values(teachers) // 老师评分和意见
            student.hope = $('#bf_hope').val(); // 不凡寄语
            if (!student.hope) {
                $.alert('请填写评价与毕业寄语')
                return false
            }
            student.fingerprint = fingerprint // 指纹
            // $.tips('正在提交中', 500);
            $.post('/feedback', student, function(data) {
                if (data.code === 0) {
                    $.tips('提交成功', 2000); //仅限PC浏览器支持，手机浏览器设置后无任何效果
                } else {
                    $.tips(data.msg, 2000); //仅限PC浏览器支持，手机浏览器设置后无任何效果
                }
            }, 'json')
        }
    </script>
</body>

</html>